<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      width: 600px;
      height: 400px;
    }
  </style>
</head>

<body>
  <div id="box"></div>
</body>

</html>
<script src="../node_modules/echarts/dist/echarts.min.js"></script>

<!-- <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script> -->
<script>
  let charts = echarts.init(document.getElementById('box'));
  var img =
    '';

  var trafficWay = [{
    name: '火车',
    text: '30%',
    value: 20
  }, {
    name: '飞机',
    value: 10
  }, {
    name: '客车',
    value: 30
  }, {
    name: '轮渡',
    value: 40
  }];

  var data = [];
  var color = ['#00ffff', '#00cfff', '#ff5b00', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']

  for (let i = 0; i < trafficWay.length; i++) {
    data.push({
      name: trafficWay[i].name,
      value: trafficWay[i].value,
      itemStyle: {
        // borderWidth: 6,
        // borderColor: color[i],
        // color: color[i],
        // opacity: 1
        borderRadius: 5,
        shadowBlur: 5,
        shadowColor: color[i],
        // shadowOffsetX: 10,
        // shadowOffsetY: 10,
      }
    }, {
      value: 2,
      name: '',
      labelLine: {
        show: false
      },
      label: {
        show: false
      },
      itemStyle: {
        normal: {
          color: 'rgba(0,0,0,0)',
          borderWidth: 0
        }
      },
      tooltip: {
        show: false
      }
    })
  }
  let option = {
    backgroundColor: '#eee',
    hoverAnimation: true,
    color: color,
    tooltip: {},
    lengend: {
      icon: 'circle',
      data: ['火车', '飞机', '客车', '轮渡']
    },
    series: [{
      type: 'pie',
      radius: [50, 109],
      data: data
    }],
    animationType: 'scale',
    animationEasing: 'elasticOut',
    graphic: {
      elements: [{
          type: 'image',
          style: {
            image: img,
            width: 100,
            height: 100
          },
          left: 'center',
          top: 'center'
        },
        {
          type: 'text',
          style: {
            text: "hello",
            width: 100,
            height: 100,
            stroke: 'red',
            fill: 'red'
          },
          left: 'center',
          top: 'center'
        }
      ]
    }
  }

  charts.setOption(option)
  charts.on('click', function () {
    console.log(arguments)
  })
</script>